<template>
  <div id="fileEdit" class="row" style="height: auto;">
    <div class="col-md-12">
      <textarea @input="update" v-model="data.content" style="width:100%;height:1000px;"></textarea>
    </div>
    <!--<div id="preview" class="col-md-6" style="border:0.5px solid #315;background:#e6e6e6;height:100%;" v-html="previewData"></div>-->
  </div>
</template>

<script>
  import markdown from '../assets/markdownjs/markdown'
  export default {
    name: 'fileEdit',
    props: ["path"],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        data: '',
        previewData: ''
      }
    },
    methods: {
      update () {
        this.previewData = markdown.toHTML(this.data.content);
      }
    },
    watch: {
      path (val,oldVal) {
        var that = this;
        console.log('调取ajax')
        $.getJSON("/api/file/content", {
          path: that.path
        }, function (data) {
          console.log(data);
          that.data = data.resultData;
        });
      }
    },
    created: function () {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
